<template>
    <customNavigationBar title="帮手详情" />

    <view class="content">
        <view class="infomation">
            <view class="title">基本信息</view>

            <view class="item">
                <view>帮手性别：</view>
                <view v-if="userInfo?.sex == 1">女</view>
                <view v-if="userInfo?.sex == 2">男</view>
            </view>
            <view class="item">
                <view>帮手昵称：</view>
                <view>{{ userInfo?.userName }}</view>
            </view>

            <view class="item">
                <view>手机号码：</view>
                <view>{{ userInfo?.phone }}</view>
            </view>
            <view class="item">
                <view>注册时间：</view>
                <view>{{ userInfo?.createdAt }}</view>
            </view>
            <view class="item">
                <view>帮手地址：</view>
                <view>{{ userInfo?.province + userInfo?.city + userInfo?.district + userInfo?.street + userInfo?.address }}</view>
            </view>
        </view>

        <view class="infomation">
            <view class="title">实名信息</view>

            <view class="item">
                <view>真实姓名：</view>
                <view>{{ userInfo?.name || '暂无' }}</view>
            </view>
            <view class="item">
                <view>证件类型：</view>
                <view>居民身份证</view>
            </view>
        </view>

        <view class="infomation">
            <view class="title">专业技能</view>

            <template v-for="(item, index) in userInfo.skillList" :key="index">
                <view class="item">
                    <view>证件类型：</view>
                    <view>{{ userInfo?.skillType }}</view>
                </view>
                <view class="item">
                    <view>证件状态：</view>
                    <view v-if="item.status == 'PENDING'">待审核</view>
                    <view v-if="item.status == 'APPROVED'">审核通过</view>
                    <view v-if="item.status == 'REJECTED'">拒绝</view>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { homeApis } from '@/utils/apis';
const id = ref(null);
const userInfo = ref(null);
onLoad((e) => {
    id.value = e.id;
    getData();
});
const getData = async () => {
    let res = await homeApis.getBSDetail(id.value);
    userInfo.value = res.data;
};
</script>
<style>
page {
    background: #f2f4f5;
}
</style>
<style lang="scss" scoped>
.content {
    padding: 24rpx;

    .infomation {
        width: 100%;
        padding: 20rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;

        .title {
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
        }

        .item {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            view {
                font-size: 28rpx;
                color: #999999;
                line-height: 40rpx;
                text-align: left;

                &:last-child {
                    color: #333333;
                }
            }
        }
    }
}
</style>
